<html>
    <head>
        <title>Personal Resume</title>
        <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
        <script src="./jquery-3.2.1.js"></script>        
        <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <img src="avatar.jpg" class="img-responsive center-block" alt="头像">
            </div><!-- div-img -->
            <div class="row">
                <h2 class="text-center">HELLO,</h2>
                <h2 class="text-center">MY NAME IS KAMIL<sup>24YO </sup> AND THIS IS MY RESUME/CV</h2>
            </div><!-- div-h2 -->
            <div class="row">
                <div class="col-md-7 col-xs-7">
                    <div class="row">
                        <h3>//ABOUT ME</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem,
                            cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga
                            aliquam ad asperiores voluptatem dolorum! Quasi.</p>
                    </div><!-- row -->
                    <div class="row">
                        <h3>//EDUCATION</h3>
                        <div class="col-md-2 col-xs-2">
                            <ul>
                                <li>1990</li>
                                <li>2005</li>
                                <li>2009</li>
                                <li>2012</li>
                            </ul>
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <ul>
                                <li>
                                    <p>I was born in Katowice</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente,
                                         exercitationem, totam, dolores iste dolore est aut modi.</p>
                                </li>
                                <li>
                                    <p>Secondary school specializing in artistic</p>
                                    <p>Eos, explicabo, nam, tenetur et ab eius deserunt aspernatur ipsum ducimus quibusdam quis voluptatibus.</p>
                                </li>
                                <li>
                                    <p>First level graduation in Graphic Design</p>
                                    <p>Aspernatur, mollitia, quos maxime eius suscipit sed beatae ducimus quaerat quibusdam perferendis?
                                       Iusto, quibusdam asperiores unde repellat.</p>
                                </li>
                                <li>
                                    <p>Second level graduation in Graphic Design</p>
                                    <p>Ducimus, aliquam tempore autem itaque et accusantium!</p>
                                </li>
                            </ul>
                        </div>
                    </div><!-- row -->
                    <div class="row">
                        <h3>//EXPERIENCES</h3>
                        <div class="row">
                            <div class="col-md-3 col-xs-3">
                                <p>Google</p>
                                <p>2013 - 2014</p>
                            </div>
                            <div class="col-md-9 col-xs-9">
                                <p>Front-end developer / php programmer</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, et, illum perferendis veritatis 
                                    velit sunt similique qui magni totam harum tempore eius laboriosam accusantium necessitatibus
                                     voluptatum? Enim, itaque dignissimos quia.</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 col-xs-3">
                                <p>Twitter</p>
                                <p>2012</p>
                            </div>
                            <div class="col-md-9 col-xs-9">
                                <p>Web Developer</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, nihil sit nemo voluptatem praesentium.
                                     Quia, qui facere consectetur libero asperiores fugiat consequuntur deserunt culpa repudiandae 
                                     sed quidem voluptas explicabo soluta.</p>
                            </div>
                        </div>
                    </div><!-- row -->
                </div><!-- div-left -->
                <div class="col-md-5 col-xs-5">
                    <div class="row">
                        <h3>//CONTACT</h3>
                        <div class="col-md-2 col-xs-2">
                            <span class="glyphicon glyphicon-earphone"aria-hidden="true"></span>
                        </div>
                        <div class="col-md-10 col-xs-10">500 345 242</div>
                        <div class="col-md-2 col-xs-2">
                            <span class="glyphicon glyphicon-earphone"aria-hidden="true"></span>
                        </div>
                        <div class="col-md-10 col-xs-10">office@kamsolutions.pl</div>
                        <div class="col-md-2 col-xs-2">
                            <span class="glyphicon glyphicon-earphone"aria-hidden="true"></span>
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <p>Twitter</p>
                            <p>https://twitter.com/WordPress</p>
                        </div>
                        <div class="col-md-2 col-xs-2">
                            <span class="glyphicon glyphicon-earphone"aria-hidden="true"></span>
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <p>Facebook</p>
                            <p>https://www.facebook.com/facebook</p>
                        </div>
                        <div class="col-md-2 col-xs-2">
                            <span class="glyphicon glyphicon-earphone"aria-hidden="true"></span>
                        </div>
                        <div class="col-md-10 col-xs-10">
                            <p>Skype</p>
                            <p>kamsolutions.pl</p>
                        </div>
                    </div><!--row-->
                    <div class="row">
                        <h3>//SKILLS</h3>
                        <ul>
                            <li>HTML</li>
                            <li>CSS</li>
                            <li>jQuery</li>
                            <li>PHP</li>
                            <li>Laravel 2(framework)</li>
                            <br/>
                            <li>Beginner</li>
                            <li>Proficient</li>
                            <li>Expert</li>
                            <li>Master</li>
                        </ul>
                    </div><!-- row -->
                    <div class="row">
                        <h3>//LANGUAGES</h3>
                        <ul>
                            <li>
                                <div class="col-md-6 col-xs-6">Polish</div>
                                <div class="col-md-6 col-xs-6">
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                </div>
                            </li>
                            <li>
                                <div class="col-md-6 col-xs-6">English</div>
                                <div class="col-md-6 col-xs-6">
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                    <span class="glyphicon glyphicon-star"aria-hidden="true"></span>
                                </div>
                            </li>
                        </ul>
                    </div><!-- row -->
                    <div class="row">
                        <h3>//HOBBIES</h3>
                        <ul>
                            <li><span class="glyphicon glyphicon-heart-empty"aria-hidden="true">Photography</span></li>
                            <li><span class="glyphicon glyphicon-heart-empty"aria-hidden="true">Fitness</span></li>
                            <li><span class="glyphicon glyphicon-heart-empty"aria-hidden="true">Programming</span></li>
                        </ul>
                    </div><!-- row -->

                </div><!-- div-right -->

            </div> <!-- row -->
        </div>  <!-- container -->
    </body>
</html>